你以為 dark mode/dark theme/night mode 介面設計就是全黑背景搭配全白文字嗎? 其實 dark mode 在介面配色方法上也是有學問的。
底下這張對比圖可以看出 light mode (左) 和 dark mode (右)明顯的差別, 同時也會發現當介面由 light mode 切換成 dark mode 後, 背景和文字顏色的變化, 以及輔色搭配都要符合最低的顏色對比度, 而不是使用與 light mode 對應到完全相反的顏色搭配即可。

那麼就要介紹到動態色彩 (dynamics color):

1. 別用全黑來當 dark mode 背景, 用深灰色代替可以呈現出更立體(更深, 更廣)的視覺效果, 陰影在灰色搭配下也較易顯現。此外, 亮色文字與深灰色背景搭配起來給使用者的視覺舒適度會比與全黑色背景搭配更佳, 因前者的顏色對比度低於後者繼而減少眼睛觀看的疲勞度。
   

2. 利用適當的輔色搭配來凸顯少數內容, 輔色會具有淺色, 明亮, 飽和的特性, 而大部分空間顏色配置還是使用深色系。
   

有些顏色呈現在 light mode 上會有鮮明的對比度, 讓使用者可以很快地抓到重點, 不過若是呈現在 dark mode 上可能會有對比度不足的問題而混亂使用者的焦點。因此設計師在選擇 dark mode 的輔色時, 會需要重新調整而非延用 light mode 的輔色。

暗黑模式 UI 解剖解析:

1. Background (背景)
2. Surface (表面)
3. Primary (主要組件)
4. On background (背景上的文字)
5. On Surface (表面上的文字)
6. On Primary (主要組件上的文字)
7. Secondary (次要組件)
8. On Secondary (次要組件上的文字)